<template>
    <div>
        <div class="container">
            <div class="admin-index">
                <div>
                    <div class="e-p-b-30" style="font-size: 18px;">学校回收情况</div>
                    <el-radio-group v-model="dataType" class="e-m-b-45">
                        <el-radio-button label="0">数据中台</el-radio-button>
                        <el-radio-button label="1">库存表</el-radio-button>
                        <el-radio-button label="2">学校回收情况</el-radio-button>
                        <el-radio-button label="3">入库支出</el-radio-button>
                        <el-radio-button label="4">回收汇总</el-radio-button>
                    </el-radio-group>
                </div>

                <div class="e-p-b-15 flex" style="justify-content: space-between">
                    <el-form ref="form" :model="form" label-width="auto" style="border-bottom: 1px solid var(--light);">
                        <el-form-item label="时间范围">
                            <el-radio-group v-model="form.timeType" size="small" @input="getlist">
                                <!-- <el-radio-button label="0">全部</el-radio-button> -->
                                <el-radio-button label="1">今日</el-radio-button>
                                <el-radio-button label="2">昨日</el-radio-button>
                                <el-radio-button label="3">本月</el-radio-button>
                                <el-radio-button label="4">上月</el-radio-button>
                                <el-radio-button label="5">本季度</el-radio-button>
                                <el-radio-button label="6">上季度</el-radio-button>
                                <el-radio-button label="7">本年</el-radio-button>
                                <el-radio-button label="8">上年</el-radio-button>
                                <el-radio-button label="9">自定义日期</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="自定义日期" v-if="form.timeType == 9">
                            <el-date-picker size="small" v-model="form.date" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="setTime"
                                :picker-options="expireTimeOPtion" :unlink-panels="true">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="学校筛选">
                                <el-select v-model="schoolid" clearable placeholder="请选择" @change="getlist">
                                    <el-option v-for="item in schoollist" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getlist">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <!-- <el-button @click="downloadwithdrawa()" style="margin-bottom:30px; margin-top: 1px;"
                                type="primary" plain><i class="iconfont icon-excel"></i>导出Excel</el-button> -->
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div>
                    <div class="section">
                        <div class="flex">
                            <div class="e-flex-1">
                                <div class="grid-content e-m-r-15">
                                    <div>
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>回收订单变化</span></div>
                                        </div>
                                        <div class="e-h-400">
                                            <proportion-chart :id="'main'" :data="recyclinganddelivery" v-if="loading == false"></proportion-chart>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="e-flex-1">
                                <div class="grid-content">
                                    <div>
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>回收情况</span></div>
                                            <el-button @click="downloadwithdrawa()" type="primary" plain><i class="iconfont icon-excel"></i>导出Excel</el-button>
                                        </div>
                                        <el-scrollbar class="text-item" :wrap-class="'text-item-wrap'" style="height: 370px;">
                                            <el-table :data="all" style="width: 100%;">
                                                <el-table-column prop="department" label="部门名称" width="180">
                                                </el-table-column>
                                                <el-table-column prop="weight" label="回收重量（kg）">
                                                </el-table-column>
                                                <el-table-column prop="quantity" label="回收件数（件）">
                                                </el-table-column>
                                                <el-table-column prop="amount" label="收益">
                                                </el-table-column>
                                                <el-table-column label="操作" width="90">
                                                    <template slot-scope="scope">
                                                        <el-button type="text" size="small"
                                                            @click="goView(scope.row.id)">查看</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </el-scrollbar>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="section">
                        <div class="flex">
                            <!-- <div class="e-flex-1">
                                <div class="grid-content e-m-r-15">
                                    <div>
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>回收订单变化</span></div>
                                        </div>
                                        <div class="e-h-400">
                                            <proportion-chart :id="'main'" :data="[]"></proportion-chart>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            <div class="e-flex-1">
                                <div class="grid-content">
                                    <div>
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>最新订单</span></div>
                                            <!-- <el-button @click="downloadwithdrawa()" type="primary" plain><i
                                                    class="iconfont icon-excel"></i>导出Excel</el-button> -->
                                        </div>
                                        <el-table :data="newuserorder" style="width: 100%">
                                            <el-table-column fixed type="index" label="序号" width="50">
                                            </el-table-column>
                                            <el-table-column fixed prop="number" label="订单ID" width="200">
                                                <template slot-scope="scope">
                                                <span>{{ scope.row.number }}</span>
                                                <el-tag size="mini" v-if="scope.row.firstorder">首</el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="下单用户" width="120" fixed>
                                                <template slot-scope="scope">
                                                <span>{{ scope.row.user ? scope.row.user.name:'--' }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="联系电话" width="120">
                                                <template slot-scope="scope">
                                                <span v-if="scope.row.user">{{ scope.row.user.mobile }}</span>
                                                </template>
                                            </el-table-column>
                                            <!-- <el-table-column prop="citynames" label="所属地区" width="120">
                                                <template slot-scope="scope">
                                                <span>{{ scope.row.citynames.split(',')[3] }}</span>
                                                </template>
                                            </el-table-column> -->
                                            <el-table-column prop="address" label="详细地址" width="200">
                                                <template slot-scope="scope">
                                                <el-link type="primary" @click="checkMap(scope.row.address.address,scope.row.address.lat,scope.row.address.lng)">{{ scope.row.address.address }}</el-link>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="weight" label="重量(KG)" width="120">
                                                <template slot-scope="scope">
                                                <span>{{ scope.row.weight }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="quantity" label="件数(件)" width="120">
                                                <template slot-scope="scope">
                                                <span>{{ scope.row.quantity }}</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="amount" label="回收金额（元）" width="120">
                                                <template slot-scope="scope">
                                                <span v-if="scope.row.amount !== 0">{{ scope.row.amount }}</span>
                                                <span v-if="scope.row.amount == 0">--</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="terminal" label="订单来源" width="100">
                                                <template slot-scope="scope">
                                                <span v-if="scope.row.terminal == 'OMS'">运营后台</span>
                                                <span v-if="scope.row.terminal == 'AIO'">站点端</span>
                                                <span v-if="scope.row.terminal == 'APP'">手机端</span>
                                                <span v-if="scope.row.terminal == 'WX'">微信端</span>
                                                <span v-if="scope.row.terminal == 'PC'">电脑端</span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="createddatetime" label="订单时间" width="180">
                                            </el-table-column>
                                            <el-table-column label="操作" fixed="right" width="200">
                                                <template slot-scope="scope">
                                                    <el-tooltip class="item" effect="dark" content="按住ctrl键+鼠标左键新窗口打开" placement="left-start">
                                                        <el-button type="text" size="small" @click.stop="goViewShow($event,scope.row)">查看</el-button>
                                                    </el-tooltip>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 详情页面弹窗(线上用户订单) -->
        <el-drawer
            :visible.sync="viewShow.show"
            direction="rtl"
            size="50%"
            :with-header="false"
            >
            <userOrderViews v-if="viewShow.show" :id="viewShow.id" @goBack="viewShow.show = false"></userOrderViews>
        </el-drawer>
        <!-- 详情页面弹窗(线下入库订单详情) -->
        <el-drawer
            :visible.sync="fitViewShow.show"
            direction="rtl"
            size="50%"
            :with-header="false"
            >
            <fitOrderViews v-if="fitViewShow.show" :id="fitViewShow.id" @goBack="fitViewShow.show = false"></fitOrderViews>
        </el-drawer>
    </div>
</template>

<script>
import proportionChart from '@/components/school-echarts/order-type.vue'
import userOrderViews from '@/components/order-user-list/userOrderViews.vue'
import fitOrderViews from '@/components/order-user-list/fitOrderViews.vue'

export default {
    layout: 'admin',
    head() {
        return {
            title: '学校回收情况' 
        }
    },
    components: {
        proportionChart,
        userOrderViews,
        fitOrderViews
    },
    props: {},
    data() {
        return {
            // 用户订单（线上）显示
            viewShow:{
                id: 0,
                show: false //详情页面弹窗
            },
            // 用户订单（下线）显示
            fitViewShow:{
                id: 0,
                show: false
            },
            loading: true,
            all: [],
            recyclinganddelivery: [],
            form: {
                timeType: 3,
                date: [],
                id: ""
            },
            dataType: 2,
            schoollist: [],//学校下拉列表
            schoolid: 0,//学校id
            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的 
                }
            },
            newuserorder: []
        };
    },
    watch: {
        dataType(val) {
            if (val == 0) {
                this.$router.push({
                    path: '/'
                })
            } else if (val == 1) {
                this.$router.push({
                    path: '/inventory/list'
                })
            }
            else if (val == 2) {
                this.$router.push({
                    path: '/inventory/schoollist'
                })
            }
            else if (val == 3) {
                this.$router.push({
                    path: '/finance/receipt/receipt'
                })
            } else if (val == 4) {
                this.$router.push({
                    path: '/shop/stockTable'
                })
            }
        }
    },
    mounted() {
        this.getschool().then(()=>{
            this.getlist()
        })
    },
    methods: {
        goViewShow(event,row){
            if (event.ctrlKey) {
                console.log('Ctrl + 左键点击');
                // 这里可以执行你需要的操作
                let param = []
                for(let k in this.param){
                    if(this.param[k]){
                        param.push(`${k}=${this.param[k]}`)
                    }
                }
                this.$router.push(`/order/user/list?${param.join('&')}`)
                if (row.terminal == 'AIO') {
                    window.open('/order/brother/fitViews?id=' + row.id, '_blank');
                } else {
                    window.open('/order/user/Views?id=' + row.id, '_blank');
                }
            } else {
                console.log('普通点击');
                if (row.terminal == 'AIO') {
                // return '/order/brother/fitViews?id=' + row.id
                    this.fitViewShow.id = row.id
                    this.fitViewShow.show = true
                } else {
                    this.viewShow.id = row.id
                    this.viewShow.show = true
                }
            }
        },
        getSumByType(){
            this.loading = true
            let form = {
                timeType: this.form.timeType,
                enterpriseId: this.schoolid,
                UserType: 1,
            }
            if (this.form.date !== null) {
                if (this.form.date.length > 0) {
                    form.startDate = this.form.date[0]
                    form.endDate = this.form.date[1]
                }
            }

            this.$axios.post('/user/Order/SumByType',form).then(res => {
                this.recyclinganddelivery = [
                    { value: res.offlinecount, name: '线下订单' },
                    { value: res.onlinecount, name: '线上订单' },
                ]
                
            }).finally(()=>{
                this.loading = false
            })
        },
        goView(id) {
            this.$router.push({
                path: '/order/user/Views?id=' + id
            })
        },
        downloadwithdrawa() {
            let form = {
                timeType: this.form.timeType,
                enterpriseId: this.schoolid
            }
            if (this.form.date !== null) {
                if (this.form.date.length > 0) {
                    form.startDate = this.form.date[0]
                    form.endDate = this.form.date[1]
                }
            }
            this.$axios.post('/User/Order/SumByEnterpriseDownload', form, {
                responseType: 'blob'
            }).then(res => {
                console.log(res)
                let content = res;
                let fileName = '学校回收情况.xls'
                this.utils.saveAndExport(content, fileName)
            })
        },
        setTime(e) {
            console.log(this.form.date)
            this.getlist()
        },
        getlist() {
            let form = {
                timeType: this.form.timeType,
                enterpriseId: this.schoolid,
                key: ''
            }
            if (this.form.date !== null) {
                if (this.form.date.length > 0) {
                    form.startDate = this.form.date[0]
                    form.endDate = this.form.date[1]
                }
            }
            this.$axios.post('/user/Order/SumByEnterprise', form).then(res => {
                console.log(res, 'list')
                // this.schoollist = res
                this.all = res.filter((item)=>item.department != '')
            })

            this.getSumByType()
            this.getOrderList()
        },
        getschool() {
            return this.$axios.post('/Enterprise/List', {
                "PageIndex":1,
                "PageSize":999,
                "type":2,
            }).then(res => {
                // console.log(res)
                this.schoollist = res.rows
                this.schoolid = res.rows[0].id
            })
        },
        getOrderList(){
            return this.$axios.post('/user/Order/List', {
                "PageIndex":1,
                "PageSize":999,
                "enterpriseId":this.schoolid,
                "userType": 1,
                "timeType": this.form.timeType
            }).then(res => {
                // console.log(res)
                this.newuserorder = res.rows
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.admin-index {
    .section {
        &+.section {
            margin-top: 15px;
        }

        .section-head {
            display: flex;
            align-items: center;

            .blue-span {
                background-color: var(--blue);
                width: 3px;
                height: 14px;
                display: inline-block;
                margin-right: 15px;
            }
        }
    }

    .tips-box {
        padding: 15px;

        .title {
            font-size: 20px;
            margin-bottom: 30px;
        }

        dl {
            dt {
                font-size: 14px;
                margin-bottom: 15px;

                &:before {
                    content: '';
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                    background-color: #e4e4e4;
                    border-radius: 10px;
                    margin-right: 12px;
                }
            }

            dd {
                font-size: 14px;
                color: var(--grey);
                margin-left: 22px;
            }
        }
    }

    .upload-demo {
        width: 100%;

        .el-upload-dragger {
            width: 100%;
        }
    }

    .grid-content {
        background-color: #fff;
        padding: 15px;
        height: calc(100% - 30px);
        border: 1px solid var(--light);
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .admin-statistics-content {
        display: flex;

        .item {
            &+.item {
                border-left: 1px solid var(--light);
                padding-left: 30px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }
        }
    }
}
</style>